import 'package:flutter/material.dart';

class ProductSearchHistory extends StatefulWidget {
  const ProductSearchHistory({super.key});
  @override
  State<StatefulWidget> createState() {
    return ProductSearchState();
  }
}

class ProductSearchState extends State {
  List searchedResult = [1, 2, 3];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Search List")),
      body: SingleChildScrollView(
          child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const ProductSearchComponent(),
          Padding(
            padding: const EdgeInsets.all(8),
            child: Wrap(
                spacing: 8.0,
                runSpacing: 4.0,
                children: searchedResult
                    .map((e) => FilterChip(
                          padding: const EdgeInsets.only(left: 5.0),
                          labelPadding: const EdgeInsets.only(left: 5.0),
                          avatar: CircleAvatar(
                            backgroundColor: Colors.blue.shade900,
                            child: const Text("e.title"),
                          ),
                          label: const Text("e.label"),
                          onSelected: (value) {},
                        ))
                    .toList()),
          )
        ],
      )),
    );
  }
}

class ProductSearchItem extends StatelessWidget {
  const ProductSearchItem({super.key});
  @override
  Widget build(BuildContext context) {
    return const Text("search result");
  }
}

class ProductSearchComponent extends StatelessWidget {
  const ProductSearchComponent({super.key});
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
        top: 10,
        left: 16,
        right: 16,
      ),
      child: TextField(
        decoration: InputDecoration(
          hintText: "Search...",
          hintStyle: TextStyle(color: Colors.grey.shade600),
          prefixIcon: Icon(
            Icons.search,
            color: Colors.grey.shade600,
            size: 20,
          ),
          filled: true,
          fillColor: Colors.grey.shade100,
          contentPadding: const EdgeInsets.all(8),
          enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(20),
              borderSide: BorderSide(color: Colors.grey.shade100)),
        ),
      ),
    );
  }
}
